JavaScript prototiplar zanjirini ochish: Vorislik naqshlari va obyekt yaratish

JavaScript o'z mohiyatiga ko'ra o'nlab yillar davomida vebni quvvatlantirib kelayotgan dinamik va ko'p qirrali tildir. Ko'pgina dasturchilar uning funksional jihatlari va ECMAScript 6 (ES6) va undan keyingi versiyalarda kiritilgan zamonaviy sintaksisi bilan tanish bo'lsalar-da, tilni chinakam o'zlashtirish uchun uning asosiy mexanizmlarini tushunish juda muhimdir. Eng fundamental, ammo ko'pincha noto'g'ri tushuniladigan tushunchalardan biri bu prototiplar zanjiridir. Ushbu maqola prototiplar zanjirini tushuntirib, uning obyekt yaratishga qanday yordam berishini va turli vorislik naqshlarini qanday ta'minlashini o'rganadi hamda butun dunyo dasturchilari uchun global nuqtai nazarni taqdim etadi.

Asos: JavaScript-dagi obyektlar va xususiyatlar

Prototiplar zanjiriga sho'ng'ishdan oldin, JavaScript-da obyektlar qanday ishlashi haqida asosiy tushunchaga ega bo'laylik. JavaScript-da deyarli hamma narsa obyektdir. Obyektlar kalit-qiymat juftliklari to'plamidir, bunda kalitlar xususiyat nomlari (odatda satrlar yoki Symbol-lar) va qiymatlar har qanday ma'lumot turi, jumladan boshqa obyektlar, funksiyalar yoki primitiv qiymatlar bo'lishi mumkin.

Oddiy obyektni ko'rib chiqaylik:

            const person = {
  name: "Alice",
  age: 30,
  greet: function() {
    console.log(`Salom, mening ismim ${this.name}.`);
  }
};

console.log(person.name); // Chiqish: Alice
person.greet();        // Chiqish: Salom, mening ismim Alice.

            

              
                Copy
              
            
          

person.name kabi obyektning xususiyatiga murojaat qilganingizda, JavaScript avval o'sha xususiyatni to'g'ridan-to'g'ri obyektning o'zida qidiradi. Agar topa olmasa, u shu yerda to'xtamaydi. Aynan shu yerda prototiplar zanjiri ishga tushadi.

Prototip nima?

Har bir JavaScript obyekti [[Prototype]] deb ataladigan ichki xususiyatga ega bo'lib, u boshqa obyektga ishora qiladi. Bu boshqa obyekt asl obyektning prototipi deb ataladi. Siz obyektning xususiyatiga kirishga harakat qilganingizda va bu xususiyat to'g'ridan-to'g'ri obyektda topilmasa, JavaScript uni obyektning prototipidan qidiradi. Agar u yerda ham topilmasa, u prototipning prototipini qidiradi va hokazo, zanjir hosil qiladi.

Bu zanjir JavaScript xususiyatni topmaguncha yoki zanjir oxiriga, ya'ni [[Prototype]] qiymati null bo'lgan Object.prototype ga yetguncha davom etadi. Bu mexanizm prototipik vorislik deb nomlanadi.

Prototipga kirish

[[Prototype]] ichki slot bo'lsa-da, obyektning prototipi bilan ishlashning ikkita asosiy usuli mavjud:

• Object.getPrototypeOf(obj): Bu obyekt prototipini olishning standart va tavsiya etilgan usulidir.
• obj.__proto__: Bu eskirgan, ammo keng qo'llab-quvvatlanadigan nostandart xususiyat bo'lib, u ham prototipni qaytaradi. Moslikni yaxshilash va standartlarga rioya qilish uchun odatda Object.getPrototypeOf() dan foydalanish tavsiya etiladi.

const person = {
  name: "Alice"
};

const personPrototype = Object.getPrototypeOf(person);
console.log(personPrototype === Object.prototype); // Chiqish: true

// Eskirgan __proto__ dan foydalanish
console.log(person.__proto__ === Object.prototype); // Chiqish: true

Prototiplar zanjirining amalda qo'llanilishi

Prototiplar zanjiri mohiyatan obyektlarning bog'langan ro'yxatidir. Siz biror xususiyatga murojaat qilishga harakat qilganingizda (get, set yoki delete), JavaScript bu zanjir bo'ylab harakatlanadi:

1. JavaScript xususiyatning to'g'ridan-to'g'ri obyektning o'zida mavjudligini tekshiradi.
2. Agar topilmasa, u obyektning prototipini (obj.[[Prototype]]) tekshiradi.
3. Agar hali ham topilmasa, u prototipning prototipini tekshiradi va hokazo.
4. Bu xususiyat topilguncha yoki zanjir prototipi null bo'lgan obyektda (odatda Object.prototype) tugamaguncha davom etadi.

Keling, buni misol bilan ko'rib chiqamiz. Tasavvur qiling, bizda asosiy `Animal` konstruktor funksiyasi va `Animal` dan meros oluvchi `Dog` konstruktor funksiyasi bor.

// Animal uchun konstruktor funksiyasi
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} ovoz chiqaradi.`);
};

// Dog uchun konstruktor funksiyasi
function Dog(name, breed) {
  Animal.call(this, name); // Ota konstruktorni chaqirish
  this.breed = breed;
}

// Prototiplar zanjirini sozlash: Dog.prototype Animal.prototype dan meros oladi
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // Konstruktor xususiyatini to'g'rilash

Dog.prototype.bark = function() {
  console.log(`Vov! Mening ismim ${this.name} va men ${this.breed} zotidanman.`);
};

const myDog = new Dog("Buddy", "Oltin Retriver");

console.log(myDog.name);     // Chiqish: Buddy (myDog da topildi)
myDog.speak();    // Chiqish: Buddy ovoz chiqaradi. (Animal.prototype orqali Dog.prototype da topildi)
myDog.bark();     // Chiqish: Vov! Mening ismim Buddy va men Oltin Retriver zotidanman. (Dog.prototype da topildi)

console.log(Object.getPrototypeOf(myDog) === Dog.prototype); // Chiqish: true
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype); // Chiqish: true
console.log(Object.getPrototypeOf(Animal.prototype) === Object.prototype); // Chiqish: true
console.log(Object.getPrototypeOf(Object.prototype) === null); // Chiqish: true

Bu misolda:

• myDog name va breed to'g'ridan-to'g'ri xususiyatlariga ega.
• myDog.speak() chaqirilganda, JavaScript speak ni myDog da qidiradi. U topilmaydi.
• So'ng u Object.getPrototypeOf(myDog) ni, ya'ni Dog.prototype ni tekshiradi. speak u yerda topilmaydi.
• So'ng u Object.getPrototypeOf(Dog.prototype) ni, ya'ni Animal.prototype ni tekshiradi. Bu yerda speak topiladi! Funksiya bajariladi va speak ichidagi this myDog ga ishora qiladi.

Obyekt yaratish naqshlari

Prototiplar zanjiri JavaScript-da obyektlarning qanday yaratilishi bilan chambarchas bog'liq. Tarixan, ES6 klasslaridan oldin, obyekt yaratish va vorislikka erishish uchun bir nechta naqshlar ishlatilgan:

1. Konstruktor funksiyalari

Yuqoridagi Animal va Dog misollarida ko'rilganidek, konstruktor funksiyalari obyektlarni yaratishning an'anaviy usulidir. Siz new kalit so'zini funksiya bilan ishlatganingizda, JavaScript bir nechta amallarni bajaradi:

1. Yangi bo'sh obyekt yaratiladi.
2. Bu yangi obyekt konstruktor funksiyasining prototype xususiyatiga bog'lanadi (ya'ni, newObj.[[Prototype]] = Constructor.prototype).
3. Konstruktor funksiyasi yangi obyekt this ga bog'langan holda chaqiriladi.
4. Agar konstruktor funksiyasi aniq obyekt qaytarmasa, yangi yaratilgan obyekt (this) yashirincha qaytariladi.

Ushbu naqsh konstruktor prototipida belgilangan umumiy metodlarga ega bo'lgan obyektlarning bir nechta nusxalarini yaratish uchun kuchli vositadir.

2. Fabrika funksiyalari

Fabrika funksiyalari shunchaki obyekt qaytaradigan funksiyalardir. Ular new kalit so'zini ishlatmaydi va konstruktor funksiyalari kabi avtomatik ravishda prototipga bog'lanmaydi. Biroq, ular qaytarilgan obyektning prototipini aniq belgilash orqali prototiplardan foydalanishlari mumkin.

function createPerson(name, age) {
  const person = Object.create(personFactory.prototype);
  person.name = name;
  person.age = age;
  return person;
}

personFactory.prototype.greet = function() {
  console.log(`Salom, men ${this.name}`);
};

const john = createPerson("John", 25);
john.greet(); // Chiqish: Salom, men John

Object.create() bu yerda asosiy metoddir. U yangi obyekt yaratadi va mavjud obyektni yangi yaratilgan obyektning prototipi sifatida ishlatadi. Bu prototiplar zanjiri ustidan aniq nazorat qilish imkonini beradi.

3. `Object.create()`

Yuqorida aytib o'tilganidek, Object.create(proto, [propertiesObject]) belgilangan prototipga ega obyektlarni yaratish uchun asosiy vositadir. Bu sizga konstruktor funksiyalarini chetlab o'tib, to'g'ridan-to'g'ri obyektning prototipini o'rnatish imkonini beradi.

const personPrototype = {
  greet: function() {
    console.log(`Salom, mening ismim ${this.name}`);
  }
};

// 'personPrototype' ni prototip sifatida ishlatib, yangi 'bob' obyekti yaratish
const bob = Object.create(personPrototype);
bob.name = "Bob";
bob.greet(); // Chiqish: Salom, mening ismim Bob

// Ikkinchi argument sifatida xususiyatlarni ham o'tkazishingiz mumkin
const charles = Object.create(personPrototype, {
  name: { value: "Charles", writable: true, enumerable: true, configurable: true }
});
charles.greet(); // Chiqish: Salom, mening ismim Charles

Bu usul oldindan belgilangan prototiplarga ega obyektlarni yaratish uchun juda kuchli bo'lib, moslashuvchan vorislik tuzilmalarini yaratishga imkon beradi.

ES6 klasslari: Sintaktik shakar

ES6 ning paydo bo'lishi bilan JavaScript class sintaksisini taqdim etdi. Shuni tushunish muhimki, JavaScript-dagi klasslar asosan mavjud prototipik vorislik mexanizmi ustidagi sintaktik shakardir. Ular klasslarga asoslangan obyektga yo'naltirilgan tillardan kelgan dasturchilar uchun toza va tanishroq sintaksisni taqdim etadi.

// ES6 klass sintaksisidan foydalanish
class AnimalES6 {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} ovoz chiqaradi.`);
  }
}

class DogES6 extends AnimalES6 {
  constructor(name, breed) {
    super(name); // Ota klass konstruktorini chaqiradi
    this.breed = breed;
  }

  bark() {
    console.log(`Vov! Mening ismim ${this.name} va men ${this.breed} zotidanman.`);
  }
}

const myDogES6 = new DogES6("Rex", "Nemis ovcharkasi");
myDogES6.speak(); // Chiqish: Rex ovoz chiqaradi.
myDogES6.bark();  // Chiqish: Vov! Mening ismim Rex va men Nemis ovcharkasi zotidanman.

// Kapot ostida bu hali ham prototiplardan foydalanadi:
console.log(Object.getPrototypeOf(myDogES6) === DogES6.prototype); // Chiqish: true
console.log(Object.getPrototypeOf(DogES6.prototype) === AnimalES6.prototype); // Chiqish: true

Siz klassni belgilaganingizda, JavaScript asosan konstruktor funksiyasini yaratadi va prototiplar zanjirini avtomatik ravishda sozlaydi:

• constructor metodi obyekt nusxasining xususiyatlarini belgilaydi.
• Klass tanasida belgilangan metodlar (masalan, speak va bark) avtomatik ravishda ushbu klass bilan bog'liq bo'lgan konstruktor funksiyasining prototype xususiyatiga joylashtiriladi.
• extends kalit so'zi vorislik munosabatini o'rnatadi, bola klassning prototipini ota klassning prototipiga bog'laydi.

Prototiplar zanjiri nima uchun global miqyosda muhim?

Prototiplar zanjirini tushunish shunchaki akademik mashg'ulot emas; bu mustahkam, samarali va qo'llab-quvvatlanadigan JavaScript ilovalarini, ayniqsa global kontekstda, ishlab chiqish uchun chuqur ahamiyatga ega:

• Ishlash samaradorligini optimallashtirish: Metodlarni har bir alohida obyekt nusxasida emas, balki prototipda belgilash orqali siz xotirani tejaysiz. Barcha nusxalar bir xil metod funksiyalaridan foydalanadi, bu esa xotiradan samaraliroq foydalanishga olib keladi, bu butun dunyo bo'ylab keng turdagi qurilmalar va tarmoq sharoitlarida joylashtirilgan ilovalar uchun juda muhimdir.
• Kodning qayta ishlatilishi: Prototiplar zanjiri JavaScript-ning kodni qayta ishlatish uchun asosiy mexanizmidir. Vorislik sizga kodni takrorlamasdan funksionallikni kengaytirib, murakkab obyekt ierarxiyalarini yaratishga imkon beradi. Bu xalqaro loyihalar ustida ishlayotgan katta, taqsimlangan jamoalar uchun bebahodir.
• Chuqur nosozliklarni tuzatish: Xatolar yuzaga kelganda, prototiplar zanjirini kuzatish kutilmagan xatti-harakatlarning manbasini aniqlashga yordam beradi. Xususiyatlar qanday qidirilishini tushunish vorislik, ko'rinish doirasi va `this` bog'lanishi bilan bog'liq muammolarni tuzatishning kalitidir.
• Freyvorklar va kutubxonalar: Ko'pgina mashhur JavaScript freymvorklari va kutubxonalari (masalan, React, Angular, Vue.js ning eski versiyalari) prototiplar zanjiriga qattiq tayanadi yoki u bilan o'zaro aloqada bo'ladi. Prototlarni yaxshi tushunish ularning ichki ishlarini anglashga va ulardan samaraliroq foydalanishga yordam beradi.
• Tillararo muvofiqlik: JavaScript-ning prototiplar bilan moslashuvchanligi uni boshqa tizimlar yoki tillar bilan, ayniqsa JavaScript mahalliy modullar bilan o'zaro aloqada bo'lgan Node.js kabi muhitlarda integratsiya qilishni osonlashtiradi.
• Konseptual aniqlik: ES6 klasslari ba'zi murakkabliklarni mavhumlashtirsa-da, prototiplarni fundamental tushunish sizga kapot ostida nima sodir bo'layotganini anglash imkonini beradi. Bu sizning tushunchangizni chuqurlashtiradi va geografik joylashuvingiz yoki afzal ko'rgan ishlab chiqish muhitingizdan qat'i nazar, chekka holatlar va ilg'or stsenariylarni ishonchliroq hal qilish imkonini beradi.

Umumiy xatolar va eng yaxshi amaliyotlar

Prototiplar zanjiri kuchli bo'lishiga qaramay, ehtiyotkorlik bilan ishlatilmasa, chalkashliklarga olib kelishi mumkin. Mana bir nechta umumiy xatolar va eng yaxshi amaliyotlar:

Xato 1: O'rnatilgan prototiplarni o'zgartirish

Odatda Array.prototype yoki Object.prototype kabi o'rnatilgan obyekt prototiplariga metodlar qo'shish yoki ularni o'zgartirish yomon fikrdir. Bu, ayniqsa, katta loyihalarda yoki ushbu prototiplarning asl xatti-harakatlariga tayanishi mumkin bo'lgan uchinchi tomon kutubxonalaridan foydalanganda nomlash ziddiyatlariga va kutilmagan xatti-harakatlarga olib kelishi mumkin.

Eng yaxshi amaliyot: O'zingizning konstruktor funksiyalaringiz, fabrika funksiyalaringiz yoki ES6 klasslaringizdan foydalaning. Agar funksionallikni kengaytirish kerak bo'lsa, yordamchi funksiyalar yaratish yoki modullardan foydalanishni ko'rib chiqing.

Xato 2: Noto'g'ri konstruktor xususiyati

Vorislikni qo'lda sozlaganda (masalan, Dog.prototype = Object.create(Animal.prototype)), yangi prototipning (Dog.prototype) constructor xususiyati asl konstruktorga (Animal) ishora qiladi. Bu `instanceof` tekshiruvlari va introspeksiya bilan bog'liq muammolarni keltirib chiqarishi mumkin.

Eng yaxshi amaliyot: Vorislikni sozlagandan so'ng har doim constructor xususiyatini aniq qayta o'rnating:

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Xato 3: `this` kontekstini tushunish

Prototip metodlari ichidagi this ning xatti-harakati juda muhim. this har doim metod qayerda belgilanganiga emas, balki metod chaqirilgan obyektga ishora qiladi. Bu prototiplar zanjiri bo'ylab metodlarning ishlashining asosidir.

Eng yaxshi amaliyot: Metodlar qanday chaqirilishiga e'tiborli bo'ling. Agar sizga this kontekstini aniq belgilash kerak bo'lsa, ayniqsa metodlarni qayta chaqiruvlar (callbacks) sifatida uzatayotganda, `.call()`, `.apply()` yoki `.bind()` dan foydalaning.

Xato 4: Boshqa tillardagi klasslar bilan chalkashlik

Klassik vorislikka (Java yoki C++ kabi) o'rgangan dasturchilar uchun JavaScript-ning prototipik vorislik modeli dastlab g'ayrioddiy tuyulishi mumkin. Unutmangki, ES6 klasslari fasaddir; asosiy mexanizm hali ham prototiplardir.

Eng yaxshi amaliyot: JavaScript-ning prototipik tabiatini qabul qiling. Obyektlar o'z prototiplari orqali xususiyatlarni qidirishni qanday topshirishini tushunishga e'tibor qarating.

Asoslardan tashqari: Ilg'or tushunchalar

`instanceof` operatori

instanceof operatori obyektning prototiplar zanjirida ma'lum bir konstruktorning prototype xususiyati mavjudligini tekshiradi. Bu prototipik tizimda turni tekshirish uchun kuchli vositadir.

console.log(myDog instanceof Dog);      // Chiqish: true
console.log(myDog instanceof Animal);   // Chiqish: true
console.log(myDog instanceof Object);   // Chiqish: true
console.log(myDog instanceof Array);    // Chiqish: false

`isPrototypeOf()` metodi

Object.prototype.isPrototypeOf() metodi bir obyektning boshqa obyektning prototiplar zanjirida biror joyda paydo bo'lishini tekshiradi.

console.log(Dog.prototype.isPrototypeOf(myDog));    // Chiqish: true
console.log(Animal.prototype.isPrototypeOf(myDog)); // Chiqish: true
console.log(Object.prototype.isPrototypeOf(myDog)); // Chiqish: true

Xususiyatlarni soyalash

Obyektning xususiyati, agar u prototipidagi xususiyat bilan bir xil nomga ega bo'lsa, uni soyalaydi deyiladi. Siz xususiyatga murojaat qilganingizda, obyektning o'zidagi xususiyat olinadi va prototipdagi xususiyat e'tiborga olinmaydi (obyektning xususiyati o'chirilguncha). Bu ham ma'lumot xususiyatlariga, ham metodlarga tegishli.

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Salom, Person dan: ${this.name}`);
  }
}

class Employee extends Person {
  constructor(name, id) {
    super(name);
    this.id = id;
  }

  // Person dan greet metodini soyalash
  greet() {
    console.log(`Salom, Employee dan: ${this.name}, ID: ${this.id}`);
  }
}

const emp = new Employee("Jane", "E123");
emp.greet(); // Chiqish: Salom, Employee dan: Jane, ID: E123

// Otaning greet metodini chaqirish uchun super.greet() kerak bo'ladi

Xulosa

JavaScript prototiplar zanjiri obyektlar qanday yaratilishini, xususiyatlarga qanday kirilishini va vorislikka qanday erishilishini asoslovchi fundamental tushunchadir. ES6 klasslari kabi zamonaviy sintaksis uning ishlatilishini soddalashtirsa-da, prototiplarni chuqur tushunish har qanday jiddiy JavaScript dasturchisi uchun zarurdir. Ushbu tushunchani o'zlashtirib, siz yanada samarali, qayta ishlatiladigan va qo'llab-quvvatlanadigan kod yozish qobiliyatiga ega bo'lasiz, bu global loyihalarda samarali hamkorlik qilish uchun juda muhimdir. Siz ko'p millatli korporatsiya uchun yoki xalqaro foydalanuvchilar bazasiga ega kichik startap uchun dastur ishlab chiqayotganingizdan qat'i nazar, JavaScript-ning prototipik vorisligini puxta o'zlashtirish sizning dasturlash arsenalingizda kuchli vosita bo'lib xizmat qiladi.

Tadqiq qilishda, o'rganishda davom eting va dasturlashdan zavqlaning!